{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}

{% block title %}
<title>技术问答 -- 围脖blog</title>
{% endblock %}

{% block right %}
<div class="panel panel-primary col-xs-12">
    <div class="panel-heading col-xs-12">
    	<h3 class="col-xs-6" style="margin-top: 10px;">技术问答</h3>
    	<a data-toggle="modal" href="#new_wenti"><div class="well well-sm col-xs-6 pull-right" style="color: #000;width: 65px;margin-bottom: 0;">新问题</div></a>	
    </div>
	<ul class="list-group">
		{% for q in qs[::-1] %}
		<li class="list-group-item col-xs-12">
				<a href="{{ url_for('main.question',id=q.id) }}"><h4 class="col-xs-12"><strong>{{ q.title }}</strong></h4></a>
				<p class="list-meta col-xs-12">
					<a href="{{ url_for('main.user_index',id=User.query.filter_by(id=q.author).first().id) }}">
					<button type="button" class="btn btn-info btn-xs">
					<span class="glyphicon glyphicon-user"></span>
					作者：{{ User.query.filter_by(id=q.author).first().username }}
					</button></a>
					<button type="button" class="btn btn-default btn-xs" id="read">
					<span class="glyphicon glyphicon-eye-open"></span> {{ q.clink }}次阅读
					</button>
					<button type="button" class="btn btn-default btn-xs" id="read">
					<span class="glyphicon glyphicon-eye-open"></span> {{ q.reply }}个答案
					</button>
					<button type="button" class="btn btn-default btn-xs" id="time">
					<span class="glyphicon glyphicon-time"></span>
						<script>
						var weekday = moment('{{ q.timestamp }}').locale('zh-cn').fromNow(); 
						document.write(weekday);
						</script>				
					</button>
					{% if q.answer %}
					<button type="button" class="btn btn-success btn-xs">
					  	<span class="glyphicon glyphicon-ok"></span> 已解决
					</button>
					{% endif %}
				</p>
		</li>
		{% endfor %}
	</ul>
</div>
{% endblock %}

{% block modal %}
{{ super() }}
<!-- 模态框（Modal） -->
<div class="modal fade" id="new_wenti" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">发表提问</h4>
            </div>
            <div class="modal-body">
                {% if current_user.is_authenticated %}
		    	<form role="form" action="" method="post">
		    		{{ form.csrf_token }}
		            <div class="form-group">
		                {{ form.title.label }} {{ form.title(class ="form-control")}}
		            </div>
		    		<div class="form-group" style="margin-bottom: 0px;">
		    			{{ form.body.label }}
		                <div hidden>
		                {{ form.body(class ="form-control")}}
		                </div>
		    		</div>
				    <div id="editor" style="margin-bottom: 15px; background-color: #fff;">
				    </div>
		    	   <button class="btn btn-info" id="submit1">发布</button>
		        </form>
			    <script src="{{ url_for('static',filename='js/wangEditor.min.js') }}"></script>
			    <script type="text/javascript">
			        var E = window.wangEditor
			        var editor = new E('#editor')
			        var $body = $('#body')
			        editor.customConfig.onchange = function (html) {
			            // 监控变化，同步更新到 textarea
			            $body.val(html)
			        }
				    editor.customConfig.menus = [
					    'head',  // 标题
					    'bold',  // 粗体
					    'italic',  // 斜体
					    'underline',  // 下划线
					    'strikeThrough',  // 删除线
					    'foreColor',  // 文字颜色
					    'backColor',  // 背景颜色
					    'link',  // 插入链接
					    'list',  // 列表
					    'justify',  // 对齐方式
					    'quote',  // 引用
					    'image',  // 插入图片
					    'table',  // 表格
					    'code',  // 插入代码
					    'undo',  // 撤销
					    'redo'  // 重复
				    ]       
			        editor.create();
			        $body.val(editor.txt.html())
			    </script>
                {% else %}
                请登录后进行此操作
                {% endif %}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                {% if current_user.is_authenticated %}
                <button type="submit" class="btn btn-primary" onclick="load()">提交</button>
                <script>
				function load(){
				    //下面两种方法效果是一样的
				    // document.getElementById("target").onclick();
				    document.getElementById("submit1").click();
				}
				document.getElementById("submit1").style.display="none"
				</script>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}

